<template>
    <span>
        <span>{{ time.h }}</span
        >:<span>{{ time.m }}</span
        >:<span>{{ time.s }}</span>
    </span>
</template>
<script>
import timer from '@/mixin/timer';
export default {
    name: 'countdown',
    props: ['startTime', 'endTime'],
    mixins: [timer],
    data() {
        return {};
    },
    computed: {
        status() {
            if (new Date(this.startTime).getTime() > this.currentTime) {
                return 'start';
            } else {
                return 'end';
            }
        },
    },
    watch: {
        startTime() {
            this.init();
        },
        endTime() {
            this.init();
        },
        status() {
            this.init();
            this.$emit('change-status');
        },
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            clearTimeout(this.timeout);
            this.serveTime = this.currentTime;
            if (this.startTime && new Date(this.startTime).getTime() > this.serveTime) {
                this.getServeTime(new Date(this.startTime).getTime());
            } else if (this.endTime && new Date(this.endTime).getTime() > this.serveTime) {
                this.getServeTime(new Date(this.endTime).getTime());
            }
        },
        getDrillDetail() {},
    },
};
</script>
<style scoped></style>
